<template>
  <vab-chart :option="option" />
</template>

<script lang="ts" setup>
import { graphic } from 'echarts/core'
import { random } from 'lodash-es'

defineOptions({
  name: 'DataScreenLeft1',
})

const option = reactive<any>({
  grid: {
    left: '0',
    right: '0',
    bottom: '0',
    top: '10px',
    containLabel: true,
  },
  tooltip: {
    trigger: 'axis',
  },
  xAxis: {
    show: false,
    type: 'value',
    axisLabel: {
      color: '#eee',
    },
    boundaryGap: false,
    splitLine: {
      show: false,
    },
  },
  yAxis: [
    {
      type: 'category',
      inverse: true,
      data: ['iphone 14 Pro Max', 'iphone 14 Pro', '华为Mate40 Pro', 'OPPO A93', '荣耀50', 'vivo Y31s', '荣耀X30', '华为P40 Pro'],
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        color: '#eee',
      },
    },
  ],
  series: {
    name: '百分比',
    type: 'bar',
    zlevel: 1,
    itemStyle: {
      borderRadius: 10,
      color: new graphic.LinearGradient(0, 0, 1, 0, [
        {
          offset: 0,
          color: 'rgb(57,89,255,1)',
        },
        {
          offset: 1,
          color: 'rgb(46,200,207,1)',
        },
      ]),
    },
    barWidth: 15,
    data: [random(100, 2000), random(100, 2000), random(100, 2000), random(100, 2000)],
    label: {
      show: true,
      position: 'right',
      color: '#fff',
      formatter: '{c}%'
    },
  },
})

option.series.data = [12.8, 11.5, 11.2, 10.9, 10.79, 9.6, 8.89, 7.8]

</script>
